<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body style="width:1000px; height: 300px;">
    <div class="draggable" style="width: 30px; height: 30px; background-color:olivedrab;"></div>
    <!-- <script src="js/jquery.min.js"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/interactjs@1.3.3/dist/interact.min.js"></script> -->
    <script src="../js/interact-1.1.2.js"></script>
    <script>
    //     function copy($div) {
    //         $('body').append($(`<div id="div" style="width: 30px; height: 30px; background-color: black;">1</div>`));
    //         console.log($div);
    //         $('body').append($($div.prop("outerHTML")));
    //         // console.log($div);
    //     }

    //     interact('body *')
    //         .draggable({
    //             // enable inertial throwing
    //             inertia: true,
    //             // keep the element within the area of it's parent
    //             restrict: {
    //                 restriction: "parent",
    //                 endOnly: true,
    //                 elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
    //             },
    //             // enable autoScroll
    //             autoScroll: true,

    //             // call this function on every dragmove event
    //             onmove: dragMoveListener,
    //             // call this function on every dragend event
    //             onend: function (event) {
    //                 var textEl = event.target.querySelector('p');

    //                 textEl && (textEl.textContent =
    //                     'moved a distance of '
    //                     + (Math.sqrt(Math.pow(event.pageX - event.x0, 2) +
    //                         Math.pow(event.pageY - event.y0, 2) | 0))
    //                         .toFixed(2) + 'px');
    //             }
    //         });

    //     function dragMoveListener(event) {
    //         var target = event.target,
    //             // keep the dragged position in the data-x/data-y attributes
    //             x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
    //             y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    //         // translate the element
    //         target.style.webkitTransform =
    //             target.style.transform =
    //             'translate(' + x + 'px, ' + y + 'px)';

    //         // update the posiion attributes
    //         target.setAttribute('data-x', x);
    //         target.setAttribute('data-y', y);
    //     }
    // </script>
</body>

</html>